<template>
  <view class="choose-item">
    <image v-if="question?.ifPic === 'y' && question?.bigPic" class="all-bg" mode="aspectFill" :src="question.bigPic" />

    <up-transition :show="true" :duration="1500" mode="fade" @after-enter="showContent = true">
      <view class="choose-main">
        <view class="choose-warp">
          <view class="choose-play flex items-center justify-center">
            <image class="icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_play.png" />
          </view>

          <view class="title">
            <text class="lable" :class="[(question?.type === 'm' || question?.type === 4) && 'm-lable']">
              {{ (question?.type === 's' || question?.type === 5) ? '单选题' : (question?.type === 'm' || question?.type === 4) ? '多选题' : '判断题' }}
            </text>
            <text class="text">
              {{ question?.title }}
            </text>
          </view>

          <view v-if="question?.ifPic === 'y' && question.pic" class="image-box">
            <image class="img-bg" src="https://app5.shuguostar.cn/imgs/images/answer/img_bg.png" />
            <image class="image" :src="question?.pic" mode="aspectFill" />
          </view>

          <view v-for="item in question?.options" :key="item.id" class="choose-item" :class="[getSatus(item) === '1' ? 'item-correct' : getSatus(item) === '2' ? 'item-error' : getSatus(item) === '3' ? 'item-choose' : '']" @click="setChoose(item)">
            <text class="item-text">
              {{ item.optionTab }}. {{ item.description }}
            </text>
            <image v-if="showAnswer && ['1', '2'].includes(getSatus(item))" class="item-img" :src="`https://app5.shuguostar.cn/imgs/images/answer/icon_${getSatus(item) === '1' ? 'correct' : 'error'}.png`" />
          </view>
        </view>
      </view>
    </up-transition>
  </view>
</template>

<script setup lang="ts" name="ChooseItem">
import type { Option, QuestionResult } from '@/api/read/type';

const props = defineProps({
  question: {
    type: Object as () => QuestionResult,
    default: () => {},
  },

  showAnswer: {
    type: Boolean,
    default: false,
  },

  play: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['setAnswer']);

const showContent = ref<boolean>(false);
const chooseAnswer = ref<Array<string>>([]);

const setChoose = (item: Option) => {
  if (props.showAnswer)
    return;
  if (props.question?.type !== 'm' && props.question?.type !== 4) {
    chooseAnswer.value = [item.optionTab];
    return;
  }
  const hasItem = chooseAnswer.value.filter(i => i === item.optionTab).length;
  if (hasItem) {
    chooseAnswer.value = chooseAnswer.value.filter(i => i !== item.optionTab);
  }
  else {
    chooseAnswer.value.push(item.optionTab);
  }

  emit('setAnswer', chooseAnswer.value.join(','));
};

const getSatus = (item: Option) => {
  if (props.showAnswer) {
    if (chooseAnswer.value.includes(item.optionTab) && item.isCorrect === 'Y') {
      return '1';
    }
    else if (chooseAnswer.value.includes(item.optionTab) && item.isCorrect !== 'Y') {
      return '2';
    }
    else if (!chooseAnswer.value.includes(item.optionTab) && item.isCorrect === 'Y') {
      return '2';
    }
  }
  else {
    if (chooseAnswer.value.includes(item.optionTab)) {
      return '3';
    }
  }

  return '';
};

const isPlay = ref<boolean>(false);
const choose = 'https://app5.shuguostar.cn/imgs/bookVido/audio/choose.mp3';
let innerAudioContext: any;
const playAudio = () => {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = true;
  innerAudioContext.src = choose;
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
  innerAudioContext.onEnded(() => {
    isPlay.value = false;
  });
};

const pauseAudio = () => {
  innerAudioContext?.destroy();
  innerAudioContext = null;
};

watch(() => props.question?.id, () => {
  chooseAnswer.value = [];
  if (props.play) {
    playAudio();
  }
}, { deep: true });

defineExpose({
  pauseAudio,
});
</script>

<style lang="scss" scoped>
.choose-item {
  width: 100%;

  .all-bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 750rpx;
  }

  .choose-main {
    width: 100%;
    position: relative;
    margin: 84rpx 0 200rpx 0;
    z-index: 2;

    &::before {
      content: '';
      position: absolute;
      left: 30rpx;
      bottom: -28rpx;
      height: 400rpx;
      width: 626rpx;
      background: rgba(51,51,51,0.4);
      border-radius: 48rpx;
      z-index: -1;
      transform: translateZ(-2rpx);
    }

    &::after {
      content: '';
      position: absolute;
      left: 60rpx;
      bottom: -50rpx;
      height: 400rpx;
      width: 566rpx;
      background: rgba(51,51,51,0.2);
      border-radius: 40rpx;
      z-index: -1;
    }

    .choose-warp {
      padding: 48rpx 32rpx;
      background: #fff;
      border-radius: 48rpx;
    }

    .choose-play {
      position: absolute;
      top: -32rpx;
      right: -16rpx;
      width: 80rpx;
      height: 80rpx;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(28,24,24,0.08);

      .icon {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .title {
      padding-bottom: 42rpx;

      .lable {
        display: inline-block;
        margin-right: 16rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #fff;
        background: #22BF57;
        border-radius: 0 24rpx 24rpx 0;
      }

      .m-lable {
        border-radius: 42rpx 0 42rpx 0;
      }

      .text {
        font-size: 32rpx;
        line-height: 48rpx;
        color: #333;
      }
    }

    .image-box {
      position: relative;
      margin: 0 0 32rpx 0;
      padding: 28rpx 20rpx 28rpx 27rpx;
      width: 606rpx;
      height: 320rpx;

      .img-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 606rpx;
        height: 320rpx;
      }

      .image {
        position: relative;
        border-radius: 25rpx;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .choose-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40rpx;
      margin-bottom: 32rpx;
      border-radius: 32rpx;
      border: 2rpx solid #C1C1C1;

      .item-text {
        font-size: 32rpx;
        line-height: 106rpx;
        color: #666666;
      }

      .item-img {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .item-choose {
      border-color: #4AAAF8;
    }

    .item-correct {
      background: rgba(106,194,89,0.1);
      border-color: #6AC259;
    }

    .item-error {
      background: rgba(233,46,48,0.1);
      border-color: #E92E30;
    }
  }
}
</style>
